<template>
  <el-container>
    <el-main>
      <div>
        <div class="table-wrapper">
          <el-row class="table-header" type="flex" align="middle">
            <el-col :span="24" class="table-row-content">
              <div class="table-header-title">分站详情</div>
            </el-col>
          </el-row>
          <el-row class="table-row" type="flex" align="middle">
            <el-col :span="24" class="table-row-content">
              <div style="font-size: 14px;" class="table-cell">
                <p>
                  <strong style="color: red;">网址:</strong>
                  {{url}} 当前分站余额 {{ site.balance ? (site.balance / 100).toFixed(2) : 0}} 元
                </p>
              </div>
            </el-col>
          </el-row>
        </div>
        <el-row class="table-wrapper">
          <el-col :span="24">
            <el-form :inline="true" label-width="80px">
              <el-form-item label="分站" v-if="role === 'SUPER_ADMIN'">
                <el-select v-model="namespace" placeholder="分站名称">
                  <el-option
                    v-for="site in allSites"
                    :key="site.namespace"
                    :label="site.namespaceDesc"
                    :value="site.namespace"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="开始日期">
                <el-date-picker
                  v-model="start"
                  type="date"
                  placeholder="选择日期"
                  format="yyyyMMdd"
                  value-format="yyyyMMdd"
                ></el-date-picker>
              </el-form-item>
              <el-form-item label="结束日期">
                <el-date-picker v-model="end" type="date" placeholder="选择日期" format="yyyyMMdd"></el-date-picker>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="getStatistics()">搜索</el-button>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
      </div>

      <div class="table_container">
        <div class="Pagination" style="text-align: left;margin-top: 10px;">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[20, 50, 80, 100]"
            :page-size="limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          ></el-pagination>
        </div>
        <el-table :data="statistics" highlight-current-row style="width: 100%">
          <el-table-column property="dt" label="时间" width="100"></el-table-column>
          <el-table-column property="newUserSize" label="新增用户"></el-table-column>
          <el-table-column property="depositSize" label="充值次数"></el-table-column>
          <el-table-column label="充值金额">
            <template slot-scope="scope">{{ (scope.row.depositAmount / 100).toFixed(2) }}</template>
          </el-table-column>
          <el-table-column property="adjustInSize" label="调帐增加次数"></el-table-column>
          <el-table-column label="调帐增加金额">
            <template slot-scope="scope">{{ (scope.row.adjustInAmount / 100).toFixed(2) }}</template>
          </el-table-column>
          <el-table-column property="adjustOutSize" label="调帐减少次数"></el-table-column>
          <el-table-column label="调帐减少金额">
            <template slot-scope="scope">{{ (scope.row.adjustOutAmount / 100).toFixed(2) }}</template>
          </el-table-column>
          <el-table-column property="withDrawSize" label="下单次数"></el-table-column>
          <el-table-column property="detailSize" label="下单包裹数"></el-table-column>
          <el-table-column label="消费金额">
            <template slot-scope="scope">{{ (scope.row.withDrawAmount / 100).toFixed(2) }}</template>
          </el-table-column>

          <el-table-column label="分站账户余额">
            <template slot-scope="scope">{{ (scope.row.allBalance / 100).toFixed(2) }}</template>
          </el-table-column>
          <el-table-column label="每日利润">
            <template slot-scope="scope">{{ (scope.row.profitAmount / 100).toFixed(2) }}</template>
          </el-table-column>
          <el-table-column prop="namespace" label="分站"></el-table-column>
        </el-table>
        <div class="Pagination" style="text-align: left;margin-top: 10px;">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[20, 50, 80, 100]"
            :page-size="limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          ></el-pagination>
        </div>
      </div>
    </el-main>
  </el-container>
</template>

<script>
import { allStatistics } from "@/api/admin";
import { siteInfo } from "@/api/site";
import moment from "moment";
import { mapState } from "vuex";

export default {
  data() {
    return {
      url: location.host,
      start: "",
      end: null,
      namespace: "",
      statistics: [],
      currentPage: 1,
      total: 0,
      limit: 20,
      site: 0
    };
  },
  computed: {
    ...mapState("manage", ["allSites"]),
    ...mapState(["role"])
  },
  mounted() {
    // let start = moment(new Date()).format('YYYYMMDD')
    // this.start = start
    // this.end = new Date()
    // this.currentPage = 0
    // this.total = 0
    // this.statistics = []
    this.initData();
  },
  methods: {
    async initData() {
      this.getSiteBalance();
      this.getStatistics();
    },
    async getSiteBalance() {
      try {
        const result = await siteInfo();
        if (result.status === 200 && result.data.code === 200) {
          this.site = result.data.data;
        } else {
          throw new Error("获取数据失败");
        }
      } catch (error) {
        console.log("获取数据失败", error);
      }
    },
    async getStatistics() {
      try {
        let params = {
          pageIndex: this.currentPage,
          pageSize: this.limit
        };

        if (this.start != null && this.start.length !== 0) {
          params["start"] = this.start;
        }

        if (this.end !== null) {
          let endtime = moment(this.end);
          endtime.add(1, "d");
          params["end"] = endtime.format("YYYYMMDD");
        }

        if (this.namespace !== "") {
          params["namespace"] = this.namespace;
        }

        const result = await allStatistics(params);
        if (result.status === 200 && result.data.code === 200) {
          this.statistics = result.data.data;
          this.total = result.data.page.total;
        } else {
          throw new Error("获取数据失败");
        }
      } catch (err) {
        // this.$message.error('获取数据失败')
        console.log("获取数据失败", err);
      }
    },

    handleSizeChange(size) {
      this.limit = size;
      this.getStatistics();
    },
    handleCurrentChange(page) {
      this.currentPage = page;
      this.getStatistics();
    }
  }
};
</script>

<style lang="less" scoped>
@import "../../style/mixin";
.label-title {
  font-weight: bold;
  font-size: 24px;
  color: #ff633b;
  margin: 30px;
}
.introduct {
  width: 900px;
  text-align: center;
  margin: auto;
}

div.table-wrapper {
  border: 1px solid #ebeef5;
  margin: 30px 0;
}

.el-row.table-wrapper {
  border: 1px solid #ebeef5;
  margin: 30px 0;
  padding-top: 20px;
  padding-left: 10px;
}

.table-row {
  border-bottom-width: 1px;
  border-bottom-color: #ebeef5;
  border-bottom-style: solid;
}
.table-cell {
  margin: 10px 20px;
  // min-height: 48px;
  // border-right-width: 1px;
  // border-right-color: #ebeef5;
  // border-right-style: solid;
}
.table-header {
  min-height: 48px;
  border-bottom-width: 1px;
  border-bottom-color: #ebeef5;
  border-bottom-style: solid;
  background: #f6f6f6;
}
.table-header-title {
  margin-left: 10px;
}
// .el-button {
//   width: 200px;
//   margin: auto;
//   display: block;
// }
.el-table .info-row {
  background: #c9e5f5;
}

.el-table .positive-row {
  background: #e2f0e4;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #20a0ff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 120px;
  height: 120px;
  line-height: 120px;
  text-align: center;
}

.batch-dialog {
}
.batch-table {
  max-height: 400px;
  overflow: auto;
}
</style>
